<template>
  <div class="index-page">
    <!-- 左边 -->
    <div class="contetn_left">
      <!-- 人才技术专家级别分类统计 -->
      <Title title="人才技术专家级别分类统计" />
      <div class="contetn_left-top">
        <div
          class="contetn_left-top-item"
          v-for="item in leftTopOptions"
          :key="item.title"
        >
          <div class="contetn_left-top-item-top">{{ item.type }}</div>
          <div class="contetn_left-top-item-bott">
            <div class="contetn_left-top-item-bott-l">人数</div>
            <div class="contetn_left-top-item-bott-num">
              <CountUp :endVal="item.total" />
            </div>
          </div>
          <div class="contetn_left-top-item-mid"></div>
          <div class="contetn_left-top-item-bott">
            <div class="contetn_left-top-item-bott-l">占比</div>
            <div class="contetn_left-top-item-bott-num">
              <CountUp :options="{ decimalPlaces: 1 }" :endVal="item.zb">
                <template v-slot:suffix>
                  <span>%</span>
                </template>
              </CountUp>
            </div>
          </div>
        </div>
      </div>

      <!-- 人才技术专家业务领域分布 -->
      <Title title="人才技术专家业务领域分布" />
      <ItemWrap class="contetn_left-midd">
        <RightBottom1 />
      </ItemWrap>

      <!-- 人才技术专家按行业排序TOP5 -->
      <Title title="人才技术专家按行业排序TOP5" />
      <ItemWrap class="contetn_left-midd">
        <!-- <RightBottom1  /> -->
        <div class="contetn_left-bottom-top weight">
          <div class="contetn_left-bottom-top-t-index"></div>
          <div class="contetn_left-bottom-top-title">行业</div>
          <div class="contetn_left-bottom-top-jdt">人数</div>
          <div>占比</div>
          <div>同比</div>
          <div></div>
        </div>

        <div
          class="contetn_left-bottom-top"
          v-for="(item, index) in leftBottomOptions"
          :key="item.title"
        >
          <div class="contetn_left-bottom-top-index">{{ index + 1 }}</div>
          <div style="color: #a4c6e6" class="contetn_left-bottom-top-title">
            {{ item.pf }}
          </div>
          <el-tooltip
            effect="light"
            :content="`${item.total}`"
            placement="top"
          >
            <div class="contetn_left-bottom-top-jdt">
              <div
                class="contetn_left-bottom-top-jdt1"
                :style="`background-color: ${getColorByIndex[index]};width: ${item.total}%;`"
              ></div>
            </div>
          </el-tooltip>
          <div style="color: #40ddf3">{{ item.zb }}%</div>
          <div style="color: #40ddf3">{{ item.lastzb }}%</div>

          <div
            v-if="item.lastzb > 0"
            class="contetn_left-bottom-top-icon contetn_left-bottom-top-icon1"
          ></div>
          <div
            v-else-if="item.lastzb < 0"
            class="contetn_left-bottom-top-icon contetn_left-bottom-top-icon2"
          ></div>
          <div v-else class="contetn_left-bottom-top-icon contetn_left-bottom-top-icon3">-</div>
        </div>
      </ItemWrap>
    </div>

    <!-- 中间 -->
    <div class="contetn_center">
      <!-- 总览 -->
      <Title title="总览" />
      <div class="contetn_center-top">
        <div
          class="contetn_center-top-c"
          v-for="item in middleTopOptions"
          :key="item.title"
        >
          <div class="contetn_center-top-title">
            <div class="contetn_center-top-title-left">
              <div></div>
              <div style="margin-top: 6px">{{ item.title }}</div>
            </div>
            <div style="margin-top: 6px;margin-right: 6px;">
              <div>
                <CountUp :endVal="item.total" :options="{ decimalPlaces: isDecimal(item.total) ? 1 : 0 }" />
              </div>
              <div style="padding-top: 4px;">{{ item.title === "新晋专家人数" ? "人" : "%" }}</div>
            </div>
          </div>
          <div class="contetn_center-top-mid">
            <div>
              <span>同比增长&nbsp;</span>
              <CountUp :endVal="item.tb">
                <template v-slot:suffix>
                  <span>%</span>
                </template>
              </CountUp>
            </div>
            <div>
              <span>环比增长&nbsp;</span>
              <CountUp :endVal="item.hb">
                <template v-slot:suffix>
                  <span>%</span>
                </template>
              </CountUp>
            </div>
          </div>

          <div class="contetn_center-top-bott"></div>
        </div>
      </div>

      <!-- 地图 -->
      <div class="contetn_center-map">
        <div class="contetn_center-map-top">
          <Map />
        </div>
        <div class="contetn_center-map-bottom"></div>
      </div>

      <!-- 各单位专家分布&网、省公司人才加项目 -->
      <div class="contetn_center-bottom">
        <div>
          <Title title="各单位专家分布" />
          <MiddleBottomOne />
        </div>
        <div>
          <Title title="网、省公司“人才+项目”" />
          <div class="contetn_center-bottom-right">
            <div>序号</div>
            <div>单位</div>
            <div>专家人数</div>
          </div>
          <MiddleBottomTwo />
        </div>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="contetn_right">
      <!-- 人才技术专家级别分类统计 -->
      <Title title="人才技术专家级别分类统计" />
      <div class="contetn_right-top">
        <ItemWrap
          class="contetn_right-top-item"
          v-for="item in rightTopOptions"
          :key="item.title"
        >
          <div class="contetn_right-top-flex">
            <div></div>
            <div>{{ item.category }}</div>
          </div>
          <div class="contetn_right-top-line"></div>
          <div class="contetn_right-top-num">
            <CountUp :endVal="item.count" />
          </div>
        </ItemWrap>
      </div>

      <!-- 人才技术专家业务领域分布 -->
      <Title title="人才技术专家业务领域分布" />
      <ItemWrap class="contetn_right-midd">
        <el-carousel
          trigger="click"
          height="322px"
          :autoplay="false"
          arrow="always"
        >
          <el-carousel-item
            v-for="(rightMiddleOption, index) in rightMiddleOptions"
            :key="rightMiddleOption.title"
          >
            <div class="contetn_right-midd-content">
              <div class="contetn_right-midd-title">
                {{ rightMiddleOption.title || "-" }}
              </div>
              <div class="contetn_right-midd-title1">专家人数</div>
              <div class="contetn_right-midd-title2">
                {{ rightMiddleOption.num || "-" }}
              </div>

              <div
                class="contetn_right-midd-item"
                v-for="(item, i) in rightMiddleOption.dataList"
                :key="item"
              >
                <div
                  class="contetn_right-midd-item-left"
                  :style="`width: ${rightMiddleOptionsPadding[i]}%;`"
                >
                  <div style="width: calc(100% - 42px)">
                    <div
                      class="contetn_right-midd-item-letter"
                      style="text-align: end"
                    >
                      {{ item.pe }}
                    </div>
                    <div
                      class="contetn_right-midd-item-letter"
                      style="text-align: end"
                    >
                      {{ item.total || "-" }} 人
                    </div>
                  </div>
                  <div
                    :style="`background-position: right;background-image: url(${rightMiddleOptions1[i].leftIcon});`"
                    class="contetn_right-midd-item-icon"
                  ></div>
                </div>

                <div
                  class="contetn_right-midd-item-left"
                  :style="`width: ${rightMiddleOptionsPadding[i]}%;`"
                >
                  <div
                    :style="`background-position: left;background-image: url(${rightMiddleOptions1[i].rightIcon});`"
                    class="contetn_right-midd-item-icon"
                  ></div>
                  <div style="width: calc(100% - 42px)">
                    <div
                      class="contetn_right-midd-item-letter"
                      style="text-align: start"
                    >
                      {{ item.pe1 || "-" }}
                    </div>
                    <div
                      class="contetn_right-midd-item-letter"
                      style="text-align: start"
                    >
                      {{ item.total1 || "-" }} 人
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </ItemWrap>

      <!-- 人才技术专家按行业排序TOP5 -->
      <Title title="人才技术专家按行业排序TOP5" />
      <ItemWrap class="contetn_right-bttom">
        <div class="contetn_right-bttom-top">
          <div>排名</div>
          <div style="width: 120px">行业</div>
          <div>人数</div>
          <div>占比</div>
          <div>同比</div>
          <div></div>
        </div>

        <div
          :style="`background-color:${i % 2 ? '#032E54' : '#042042'} ;`"
          class="contetn_right-bttom-bot"
          v-for="(item, i) in rightBottomOptions"
          :key="item.title"
        >
          <div>{{ i + 1 }}</div>
          <div class="contetn_right-bttom-bot-title">{{ item.pf }}</div>
          <div>{{ item.total }}</div>
          <div>{{ item.zb }}%</div>
          <div>{{ item.lastzb }}%</div>
          <div
            v-if="item.lastzb > 0"
            class="contetn_right-bttom-bot-icon contetn_right-bttom-bot-icon1"
          ></div>
          <div
            v-else-if="item.lastzb < 0"
            class="contetn_right-bttom-bot-icon contetn_right-bttom-bot-icon2"
          ></div>
          <div v-else class="contetn_right-bttom-bot-icon contetn_left-bottom-top-icon3">-</div>

        </div>
      </ItemWrap>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, watch } from "vue";
import ItemWrap from "@/components/item-wrap";
import CountUp from "@/components/count-up";
import RightBottom1 from "../components/RightBottom1";
import MiddleBottomOne from "../components/MiddleBottomOne";
import MiddleBottomTwo from "../components/MiddleBottomTwo";
import {
  getLeftBottom,
  getLeftTop,
  rightBottom,
  rightCenter,
  rightTop,
} from "@/api/modules";
// import { countUserNum, installationPlan} from '@/api/modules'
import Map from "../components/Map";
import Title from "../components/Title";
import type { FormInstance, FormRules } from "element-plus";
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import icon1 from "@/assets/imgs/图层 1.png";
import icon2 from "@/assets/imgs/图层 2.png";
import icon3 from "@/assets/imgs/图层 3.png";
import icon4 from "@/assets/imgs/图层 4.png";
import icon5 from "@/assets/imgs/图层 5.png";
import icon6 from "@/assets/imgs/图层 6.png";
import icon7 from "@/assets/imgs/图层 7.png";
import icon8 from "@/assets/imgs/图层 8.png";

const settingStore = useSettingStore();
const { isExpand, orderId } = storeToRefs(settingStore);
const list = ref([]);
//
// //请求后台参数
getLeftTop({}).then((res) => {
  //   // list.value = res
  leftTopOptions.value = res;
  //   // const temp = ref([])
  //   // res.forEach(item=>{
  //   //   console.log(item.leftTop)
  //   //   temp.push(item.leftTop)
  //   // })
  //   // leftTopOptions.value =temp
});

getLeftBottom({}).then((res) => {
  leftBottomOptions.value = res;
});
rightBottom({}).then((res) => {
  rightBottomOptions.value = res;
});
const leftTopOptions = ref([]);
const getColorByIndex = ["#2B7ECA", "#40C7FF", "#35DFF7", "#8FFBE1", "#59F9B9"];
const leftBottomOptions = ref([
  // {
  //   title: list.value[0]?.pf,
  //   total: list.value[0]?.total,
  //   key1: list.value[0]?.zb,
  //   key2: list.value[0]?.lastzb,
  //   color: "#2B7ECA",
  // },
  // {
  //   title: list.value[1]?.pf,
  //   total: list.value[1]?.total,
  //   key1: list.value[1]?.zb,
  //   key2: list.value[1]?.lastzb,
  //   color: "#40C7FF",
  // },
  // {
  //   title: list.value[2]?.pf,
  //   total: list.value[2]?.total,
  //   key1: list.value[2]?.zb,
  //   key2: list.value[2]?.lastzb,
  //   color: "#35DFF7",
  // },
  // {
  //   title: list.value[3]?.pf,
  //   total: list.value[3]?.total,
  //   key1: list.value[3]?.zb,
  //   key2: list.value[3]?.lastzb,
  //   color: "#8FFBE1",
  // },
  // {
  //   title: list.value[4]?.pf,
  //   total: list.value[4]?.total,
  //   key1: list.value[4]?.zb,
  //   key2: list.value[4]?.lastzb,
  //   color: "#59F9B9",
  // },
  // list.value.map((item, index) => ({
  //   title: item.pf,
  //   total: item.total,
  //   key1: item.zb,
  //   key2: item.lastzb,
  //   color: getColorByIndex[index] // 自定义颜色分配逻辑
  // })
]);

const middleTopOptions = ref([
  {
    title: "新晋专家人数",
    icon: "",
    total:300,
    tb:30,
    hb:10,
  },
  {
    title: "技能技术专家占比",
    icon: "",
    total:5.8,
    tb:20,
    hb:10,
  },
  {
    title: "高技能人才占比",
    icon: "",
    total:80,
    tb:15,
    hb:10,
  },
]);
rightTop({}).then((res) => {
  rightTopOptions.value = res;
});
const rightTopOptions = ref([
  {
    title: "优秀",
    key: "62",
  },
  {
    title: "拔尖",
    key: "467",
  },
  {
    title: "领军",
    key: "61",
  },
  {
    title: "杰出",
    key: "7",
  },
]);

 rightCenter({}).then((res) => {
  rightMiddleOptions.value = res;
});
const rightMiddleOptions=ref([])
const rightMiddleOptionsPadding = ref([33, 25, 25, 33]);
const rightMiddleOptionsleftIcon = ref([33, 25, 25, 33]);
const rightMiddleOptionsrightIcon = ref([33, 25, 25, 33]);
const rightMiddleOptionsletter = (value) => {
  if (value.length > 4) {
    // 将字符串每4个字符分割一次
    let result = [];
    for (let i = 0; i < value.length; i += 1) {
      result.push(value.substr(i, 1));
    }
    return result.join("\n");
  }
  return value;
};

const rightMiddleOptions1 = ref([
  {
    leftTitle: "优秀",
    leftKey: "50",
    leftIcon: icon1,
    rightTitle: "调度",
    righttKey: "184",
    rightIcon: icon8,
    padding: 70,
  },
  {
    leftTitle: "变电",
    leftKey: "50",
    leftIcon: icon2,
    rightTitle: "数字化",
    righttKey: "184",
    rightIcon: icon7,
    padding: 30,
  },
  {
    leftTitle: "配电",
    leftKey: "50",
    leftIcon: icon3,
    rightTitle: "基建",
    righttKey: "184",
    rightIcon: icon6,
    padding: 30,
  },
  {
    leftTitle: "营销",
    leftKey: "50",
    leftIcon: icon4,
    rightTitle: "安监",
    righttKey: "184",
    rightIcon: icon5,
    padding: 70,
  },
]);

const rightBottomOptions = ref([]);

// const formInline = reactive({
//   key: "",
//   type: "",
//   cd: "",
//   zt: "",
// });
// 表单
const formRef1 = ref<FormInstance>();

// 监听消息列表变化，自动滚动到底部
// watch(
// orderId,
//   (val) => {
//     // console.log(val,'orderId-----');

//   },
//   { deep: true }
// );

// 页面显示隐藏效果
watch(
  isExpand,
  (val) => {
    if (val) {
      flippedClass.value = "flipped1";
    } else {
      flippedClass.value = "flipped2";
    }
    setTimeout(() => {
      flippedClass.value = "";
    }, 500);
  },
  { deep: true }
);

// 判断是不是小数
const isDecimal = (num)=> {
    return /^-?\d+\.\d+$/.test(num.toString());
}
</script>

<style scoped lang="scss">
::v-deep() {
  .el-carousel__arrow {
    background-color: #3c7dcf;
  }
  .el-carousel__arrow--left {
    left: 0;
  }
  .el-carousel__arrow--right {
    right: 0;
  }
}
.index-page {
  width: 100%;
  display: flex;
  height: calc(100% - 85px);
  // min-height: calc(100% - 64px);
  justify-content: space-between;
  transition: transform 0.6s ease;
  transform-origin: center center;
  // background-color: red;
  margin-top: 40px;
  
  background-image: url("@/assets/imgs/bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: -130px;
  

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    // display: flex;
    // align-items: baseline;
    // flex-direction: column;
    // justify-content: space-around;
    // position: relative;
    width: 500px;
    // box-sizing: border-box;
    // flex-shrink: 0;
    // background-color: red;
  }

  .contetn_left {
    .contetn_left-top {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-top: 16px;
      margin-bottom: 20px;

      .contetn_left-top-item-top {
        width: 114px;
        height: 36px;
        background-image: url("@/assets/imgs/Rectangle(1).png");
        background-size: cover;
        background-position: center center;
        font-family: SourceHanSans, SourceHanSans;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        line-height: 30px;
        text-align: center;
        margin-bottom: 4px;
      }

      .contetn_left-top-item-mid {
        margin: 16px auto;
        border: 1px solid;
        width: 89px;
        border-image: linear-gradient(
            117deg,
            rgba(106, 131, 157, 0),
            rgba(120, 150, 180, 1),
            rgba(151, 151, 151, 0)
          )
          1 1;
      }

      .contetn_left-top-item-bott {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .contetn_left-top-item-bott-l {
          font-weight: 400;
          font-size: 16px;
          color: #40ddf3;
          line-height: 24px;
        }

        .contetn_left-top-item-bott-num {
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 24px;
        }
      }
    }

    .contetn_left-midd {
      height: 322px;
      margin: 15px auto;
    }

    .weight {
      font-weight: 600;
    }

    .contetn_left-bottom-top {
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      line-height: 52px;

      > div {
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .contetn_left-bottom-top-t-index {
        width: 26px;
      }

      .contetn_left-bottom-top-index {
        width: 26px;
        height: 26px;
        background: #0a346c;
        line-height: 26px;
        font-weight: bold;
        font-size: 20px;
        color: #ffffff;
        line-height: 30px;
        text-align: center;
      }

      .contetn_left-bottom-top-title {
        width: 100px;
      }

      .contetn_left-bottom-top-jdt {
        width: 150px;
      }

      .contetn_left-bottom-top-jdt1 {
        width: 100%;
        background-color: red;
        height: 7px;
        margin: auto 0;
        border-radius: 4px;
      }

      .contetn_left-bottom-top-icon {


        // background-image: url("@/assets/imgs/Rectangle(2).png");

        background-color: #162840;
        background-size: 16px 18px;
        background-repeat: no-repeat;
        background-position: center center;



      }
      .contetn_left-bottom-top-icon3 {
        //background-image: url("@/assets/imgs/henggang.png");
        color: white;

      }
      .contetn_left-bottom-top-icon1 {
        height: 18px;
        background-image: url("@/assets/imgs/Rectangle(2).png");
      }
      .contetn_left-bottom-top-icon2 {
        height: 18px;
        background-image: url("@/assets/imgs/down.png");
      }
    }
  }

  .contetn_center {
    // flex: 1;
    width: 920px;
    // width: calc(100% - 1000px);
    // height: 1024;
    height: 100%;
    padding: 0 20px;

    // background-color: red;
    .contetn_center-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      margin-bottom: 39px;

      .contetn_center-top-c {
        .contetn_center-top-title {
          display: flex;
          justify-content: space-between;
          width: 264px;
          height: 53px;
          line-height: 53px;
          background-image: url("@/assets/imgs/组 4.png");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;

          .contetn_center-top-title-left {
            display: flex;
            align-items: center;

            > div:nth-child(1) {
              width: 38px;
              height: 34px;
              background-image: url("@/assets/imgs/图层 14.png");
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center center;
              margin-right: 10px;
            }

            > div:nth-child(2) {
              font-weight: 500;
              font-size: 16px;
              color: #ffffff;
              // line-height: 63px;
              // line-height: 24px;
            }
          }

          > div:nth-child(2) {
            font-weight: 400;
            font-size: 16px;
            color: #40ddf3;
            text-align: center;
            display: flex;
            align-items: center;

            div:nth-child(1) {
              font-size: 22px;
              font-weight: 800;
              line-height: 53px;
            }
          }
        }

        .contetn_center-top-mid {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 400;
          font-size: 16px;
          padding: 26px 10px 40px 10px;

          > div {
            display: flex;

            span:first-child {
              color: #40ddf3;
            }
          }
        }

        .contetn_center-top-bott {
          width: 100%;
          height: 6px;
          background-image: url("@/assets/imgs/图层 24.png");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }

    .contetn_center-map {
      height: 410px;
      position: relative;
      .contetn_center-map-top {
        position: absolute;
        width: 1000px;
        height: 400px;
        z-index: 2;
        left: -70px;
        top: -50px;
        // transform-style: preserve-3d;
        // animation: rotateYAxis 10s infinite linear;
        // transform: rotateX(-30deg);
      }
      @keyframes rotateYAxis {
        0% {
          transform: rotateY(-15deg); /* 初始逆时针30° */
        }
        33.3% {
          transform: rotateY(15deg); /* 顺时针旋转60°（从-30°到+30°） */
        }
        66.6% {
          transform: rotateY(-15deg); /* 逆时针旋转60°（从+30°回到-30°） */
        }
        100% {
          transform: rotateY(-15deg); /* 复位 */
        }
      }
      .contetn_center-map-bottom {
        position: absolute;
        bottom: 0;
        left: calc(50% - 333px);
        width: 666px;
        height: 250px;
        background-image: url("@/assets/imgs/组 2.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }

    .contetn_center-bottom {
      height: 302px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > div {
        width: calc(50% - 4px);
      }

      .contetn_center-bottom-right {
        display: flex;
        height: 26px;
        line-height: 26px;
        text-align: center;
        padding: 0 10px;

        > div:nth-child(1) {
          width: 15%;
        }

        > div:nth-child(2) {
          width: 60%;
        }

        > div:nth-child(3) {
          width: 25%;
        }
      }
    }
  }

  .contetn_right {
    .contetn_right-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      margin-bottom: 30px;

      .contetn_right-top-item {
        padding-top: 10px;
        width: 105px;
      }

      .contetn_right-top-flex {
        display: flex;
        align-items: center;

        > div:nth-child(1) {
          width: 4px;
          height: 16px;
          background: #ffffff;
          margin-right: 4px;
        }

        > div:nth-child(2) {
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 30px;
        }
      }

      .contetn_right-top-line {
        width: 77px;
        height: 1px;
        border: 1px solid #ffffff;
        margin-bottom: 8px;
        margin-top: 8px;
      }

      .contetn_right-top-num {
        font-weight: 800;
        font-size: 28px;
        color: #ffffff;
        line-height: 42px;
      }
    }

    .contetn_right-midd {
      height: 322px;
      width: 100%;
      margin-top: 14px;
      margin-bottom: 16px;
      // background-image: url("@/assets/imgs/组 1.png");
      // background-size: 224px 224px;
      // background-position: center center;
      // background-repeat: no-repeat;

      .contetn_right-midd-content {
        position: relative;
        padding-top: 40px;
        background-image: url("@/assets/imgs/组 1.png");
        background-size: 224px 224px;
        background-position: center center;
        background-repeat: no-repeat;
        height: 100%;
      }

      .contetn_right-midd-title {
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 21px;
        position: absolute;
        top: 8px;
        left: calc(50%);
        transform: translateX(-50%);
      }

      .contetn_right-midd-title1 {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
        position: absolute;
        top: 120px;
        left: 200px;
      }

      .contetn_right-midd-title2 {
        width: 100px;
        font-weight: 800;
        font-size: 20px;
        color: #ffffff;
        line-height: 30px;
        position: absolute;
        top: 160px;
        // left: 210px;
        text-align: center;
        left: calc(50% - 50px);
      }

      .contetn_right-midd-item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        // line-height: 120px;
        height: 66px;

        .contetn_right-midd-item-left {
          display: flex;
          // width: 50%;
          // overflow: hidden;
          .contetn_right-midd-item-letter {
            font-weight: 400;
            font-size: 12px;
            color: #a4c6e6;
            line-height: 18px;
            // width: calc(100% - 42px);
            overflow: hidden;
          }

          .contetn_right-midd-item-icon {
            width: 42px;
            height: 34px;
            background-image: url("@/assets/imgs/图层 1.png");
            background-size: 34px 34px;
            background-position: right;
            background-repeat: no-repeat;
          }
        }
      }
    }

    .contetn_right-bttom {
      height: 322px;
      width: 100%;
      margin-top: 14px;
      background-color: #081a33;
      .contetn_right-bttom-top {
        display: flex;
        justify-content: space-around;
        height: 38px;
        line-height: 38px;
        background: #032e54;
        > div {
          width: 64px;
          text-align: center;
        }
      }
      .contetn_right-bttom-bot {
        display: flex;
        justify-content: space-around;
        height: 38px;
        line-height: 38px;
        background: #032e54;
        margin: 14px 0;
        > div {
          width: 64px;
          text-align: center;
        }
        .contetn_right-bttom-bot-title {
          width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .contetn_right-bttom-bot-icon {
          // background-image: url("@/assets/imgs/Rectangle(2).png");
          //background-color: #162840;
          background-size: 16px 18px;
          background-repeat: no-repeat;
          background-position: center center;
        }
        .contetn_right-bttom-bot-icon1 {
          background-image: url("@/assets/imgs/Rectangle(2).png");
        }
        .contetn_right-bttom-bot-icon2 {
          background-image: url("@/assets/imgs/down.png");
        }
      }
    }
  }

  .pointer {
    cursor: pointer;
  }
}
</style>
